<template>
  <a-drawer
    v-model:visible="visible"
    v-bind="$attrs"
    placement="right"
    :closable="false"
    destroy-on-close
    class="wrap"
    width="330"
  >
    <modal-header style="margin: -20px 0 20px" :title="title"> </modal-header>
    <a-form
      ref="formRef"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :model="formState"
      :rules="rules"
    >
      <a-form-item label="报表编号" name="reportNumber">
        <a-input
          v-model:value="formState.reportNumber"
          placeholder="请输入报表编号"
          class="item-content"
        />
      </a-form-item>
      <a-form-item label="报表名称" name="reportName">
        <a-input
          v-model:value="formState.reportName"
          placeholder="请输入报表名称"
          class="item-content"
        />
      </a-form-item>
      <a-form-item label="报表类型" name="reportType">
        <a-radio-group v-model:value="formState.reportType">
          <a-radio :value="1">清单</a-radio>
          <a-radio :value="2">报表</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="报表频度" name="reportFrequency">
        <a-select
          v-model:value="formState.reportFrequency"
          placeholder="请选择"
          class="item-content"
        >
          <a-select-option v-for="item in reportFrequencyList" :key="item" :value="item">{{
            item
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="报送时间" name="reportTime">
        <a-date-picker
          v-model:value="formState.reportTime"
          show-time
          type="date"
          placeholder="请选择"
          class="item-content"
          style="min-width: 180px"
        />
      </a-form-item>
      <a-form-item label="监管单位" name="regulationDept">
        <a-select
          v-model:value="formState.regulationDept"
          placeholder="请选择"
          class="item-content"
        >
          <a-select-option v-for="item in regulationDeptList" :key="item" :value="item">{{
            item
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 24 }">
        <custom-upload></custom-upload>
      </a-form-item>
      <a-form-item>
        <a-button style="color: white; background-color: #f50" @click="submit">提交</a-button>
        <a-button style="margin-left: 10px; background-color: #ececec" @click="visible = false"
          >取消</a-button
        >
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, UnwrapRef } from 'vue'
  import { Drawer } from 'ant-design-vue'
  import ModalHeader from '@/components/ModalHeader.vue'
  import { Dayjs } from 'dayjs'
  import { Button, Card, Form, Input, Select, DatePicker, Radio } from 'ant-design-vue'
  import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface'
  import CustomUpload from '@/components/CustomUpload.vue'

  interface FormState {
    reportNumber: string
    reportName: string
    reportType: number | undefined
    reportFrequency: string | undefined
    regulationDept: string | undefined
    status: string | undefined
    reportTime: Dayjs | undefined
    dataTime: Dayjs | undefined
    delivery: boolean
    type: string[]
    resource: string
    desc: string
  }
  export default defineComponent({
    name: 'DirectoryDrawer',
    components: {
      CustomUpload,
      ModalHeader,
      [Drawer.name]: Drawer,
      [Card.name]: Card,
      [Button.name]: Button,
      [Form.name]: Form,
      [Form.Item.name]: Form.Item,
      [Input.name]: Input,
      'a-radio-group': Radio.Group,
      [Radio.name]: Radio,
      [Select.name]: Select,
      ASelectOption: Select.Option,
      [DatePicker.name]: DatePicker
    },
    props: {
      title: {
        type: String,
        default: ''
      },
      remove: {
        type: Function
      },
      fields: {
        type: Object,
        default: () => ({})
      }
    },
    setup(props) {
      const formRef = ref()

      const formState: UnwrapRef<FormState> = reactive({
        reportNumber: props.fields.reportNumber || '',
        reportName: props.fields.reportName || '',
        reportType: 1,
        reportFrequency: undefined,
        status: undefined,
        reportTime: undefined,
        dataTime: undefined,
        delivery: false,
        type: [],
        resource: '',
        regulationDept: '',
        desc: ''
      })

      const state = reactive({
        visible: true,
        reportFrequencyList: ['日报', '周报', '月报', '年报', '半月报'],
        regulationDeptList: ['人民银行', '银保监局', '统计局']
      })

      const rules = {
        reportNumber: [{ required: true, message: '请输入报表编号', trigger: 'blur' }],
        reportName: [{ required: true, message: '请输入报表名称', trigger: 'blur' }],
        reportType: [{ required: true }],
        regulationDept: [{ required: true, message: '请选择监管单位', trigger: 'change' }]
      }

      const submit = () => {
        formRef.value
          .validate()
          .then(() => {
            console.log('values', formState)
            state.visible = false
          })
          .catch((error: ValidateErrorEntity<FormState>) => {
            console.log('error', error)
          })
      }

      return {
        ...toRefs(state),
        formState,
        rules,
        formRef,
        submit,
        labelCol: { span: 7 },
        wrapperCol: { span: 17 }
      }
    }
  })
</script>

<style lang="scss" scoped>
  .wrap {
    .item-content {
      width: 180px;
    }
  }
</style>
